/**
 * @fileoverview Status button for Preview and Runner.
 *
 * @license Copyright 2018 The Coding with Chrome Authors.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *   http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 *
 * @author mbordihn@google.com (Markus Bordihn)
 */
{namespace cwc.soy.ui.PreviewStatusButton autoescape="strict"}


/**
 * HTML template for the status button.
 */
{template .template}
  {@param prefix: string}
  <div id="{$prefix}body">

    {call .actionIcon_ data="all"}
      {param id: 'browser' /}
      {param icon: 'open_in_browser' /}
      {param text: '@@STATUS_BUTTON__OPEN_IN_BROWSER' /}
    {/call}

    {call .actionIcon_ data="all"}
      {param id: 'fullscreen' /}
      {param icon: 'fullscreen' /}
      {param text: '@@STATUS_BUTTON__EXPAND_VIEW' /}
    {/call}

    {call .actionIcon_ data="all"}
      {param id: 'fullscreen_exit' /}
      {param icon: 'fullscreen_exit' /}
      {param text: '@@STATUS_BUTTON__COLLAPSE_VIEW' /}
    {/call}

    {call .actionIcon_ data="all"}
      {param id: 'terminate' /}
      {param icon: 'pan_tool' /}
      {param text: '@@STATUS_BUTTON__TERMINATE_VIEW' /}
    {/call}

    {call .actionIcon_ data="all"}
      {param id: 'reload' /}
      {param icon: 'refresh' /}
      {param text: '@@STATUS_BUTTON__REFRESH_VIEW' /}
    {/call}

    {call .statusIcon_ data="all"}
      {param id: 'run' /}
      {param icon: 'play_arrow' /}
      {param text: '@@STATUS_BUTTON__RUN_CODE' /}
    {/call}

    {call .statusIcon_ data="all"}
      {param id: 'stop' /}
      {param icon: 'stop' /}
      {param text: '@@STATUS_BUTTON__STOP_VIEW' /}
    {/call}

  </div>
{/template}


/**
 * Action icon template.
 */
{template .actionIcon_ private="true"}
  {@param prefix: string}
  {@param id: string}
  {@param icon: string}
  {@param text: string}

  <div id="{$prefix}{$id}">
    <button id="{$prefix}{$id}-action" class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mdl-js-ripple-effect">
      <i class="material-icons">{$icon}</i>
    </button>
    <div class="mdl-tooltip mdl-tooltip--left" data-mdl-for="{$prefix}{$id}-action">
      {msg desc=""}{$text}{/msg}
    </div>
  </div>

{/template}


/**
 * Status icon for run and stop.
 */
{template .statusIcon_ private="true"}
  {@param prefix: string}
  {@param id: string}
  {@param icon: string}
  {@param text: string}

  <div id="{$prefix}{$id}">
    <button id="{$prefix}{$id}-button" class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored">
      <i class="material-icons">{$icon}</i>
    </button>
    <div class="mdl-tooltip mdl-tooltip--left" data-mdl-for="{$prefix}{$id}-button">
      {msg desc=""}{$text}{/msg}
    </div>
  </div>

{/template}